<template>
  <div class="doctorlist">
    <!-- 导航栏 -->
    <van-nav-bar
      title="医生列表"
      left-arrow
      @click-left="onClickLeft"
      :fixed="true"
      :placeholder="true"
    />
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      placeholder="搜索医院、医生、科室、疾病"
      shape="round"
    />
    <!-- 城市下拉菜单 -->
    <div class="xiala">
      <div class="city" @click="showCity">
        <span class="cityName">杭州</span>
        <van-icon name="arrow-down" />
        <div v-if="count1 === 1" class="cityList">
          <van-index-bar
            v-for="item in cityList"
            :key="item.prefix"
            class="item"
          >
            <van-index-anchor :index="item.prefix" />
            <van-cell
              :title="value.name"
              v-for="value in item.cities"
              :key="value.cityId"
              class="cityli"
              @click="setCity(value.name)"
            />
          </van-index-bar>
        </div>
      </div>
      <div class="keshi">
        <span class="keshiName" @click="showKeshi">妇科</span
        ><van-icon name="arrow-down" />
        <!-- <van-tree-select
                v-if="count2===1"
                :items="items"
                :active-id.sync="activeId"
                :main-active-index.sync="activeIndex"
                /> -->
        <div v-if="count2 === 1" class="count2">
          <div class="content">
            <van-sidebar v-model="activeKey1">
              <van-sidebar-item
                :title="item.ksname"
                v-for="item in DepartmentsName"
                :key="item.ksid"
                @click="chooseDep(item.ksid)"
              />
            </van-sidebar>
            <ul class="ul-ul">
              <li
                v-for="(item, index) in DepartmentsAllName"
                :key="index"
                class="departmentsallName-li"
                @click="chooseName(item.ksname)"
              >
                {{ item.ksname }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 渲染医生列表 -->
    <div
      class="doctorItem"
      v-for="(item, index) in doctorList"
      :key="index"
      v-show="count3 === 1"
    >
      <div class="img">
        <img :src="item.imgUrl" alt="" />
      </div>
      <div class="msg">
        <p class="name">
          {{ item.name }}<span>{{ item.Position }}</span>
        </p>
        <p class="hospotal">
          {{ item.hospital }} · <span>{{ item.Departments }}</span>
        </p>
        <div class="label">
          <!-- <span v-for="(item1,index) in tagList" :key="index">{{ item }}</span>     -->
        </div>
        <p class="good">{{ item.adept }}</p>
        <div class="num">
          <p>
            回复率 <span>{{ item.Praise }}</span
            >咨询<span>{{ item.consult }}</span>
          </p>
          <div>
            ￥<span>{{ item.textPrice }}</span
            >咨询
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getDoctorListApi,
  getDepartments,
  getDepartmentsAllNameApi,
} from "../utils/api";
import { getCitiesApi } from "../utils/seeDoctorUtils/api";
import "../assets/css/DoctorList.css";
export default {
  props: {
    ksid: String,
  },
  data() {
    return {
      activeKey1: 1,
      value: "",
      items: "items",
      activeId: 1,
      activeIndex: 0,
      count1: 0,
      count2: 0,
      count3: 1,
      doctorList: [],
      tagList: {},
      cityList: [],
      departmengtName: "",
      DepartmentsName: [],
      ksname: "",
      depId: "",
    };
  },
  mounted() {
    this.gitDoctorList(this.ksid);
    this.getCityList();

    this.getDepartments();
    this.getDepartmentsAllName("01");
  },

  methods: {
    //获取科室列表
    async getDepartments() {
      const res = await getDepartments();
      this.DepartmentsName = res.result;
    },
    //点击获取ksid
    chooseDep(id) {
      this.depId = id;
      this.getDepartmentsAllName(this.depId);
    },
    // 获取科室详情列表
    async getDepartmentsAllName(id) {
      const res = await getDepartmentsAllNameApi({ ksid: id });
      let ress = res.result;
      this.DepartmentsAllName = ress[0].ksdetail;
    },
    // 点击科室切换
    chooseName(ksname) {
      let keshiName = document.querySelector(".keshiName");
      keshiName.innerHTML = ksname;
      this.count1 = 0;
      this.count2 = 0;
      this.count3 = 1;
    },
    //获取医生列表
    async gitDoctorList(id) {
      const res = await getDoctorListApi({ ksid: id });
      this.doctorList = res.result;
      this.tagList = this.doctorList[0].tag;
      let keshiName = document.querySelector(".keshiName");
      switch (id) {
        case "01":
          keshiName.innerHTML = "妇科";
          break;
        case "02":
          keshiName.innerHTML = "儿科";
          break;
        case "03":
          keshiName.innerHTML = "内科";
          break;
        case "04":
          keshiName.innerHTML = "外科";
          break;
        case "05":
          keshiName.innerHTML = "皮肤科";
          break;
        case "06":
          keshiName.innerHTML = "耳鼻喉科";
          break;
        default:
          "01";
          break;
      }
    },
    //获取城市列表
    async getCityList() {
      const res = await getCitiesApi();
      this.cityList = res.result;
    },
    // 设置页面显示的城市的value
    setCity(value) {
      let cityName = document.querySelector(".cityName");
      cityName.innerHTML = value;
    },
    //返回上一页
    onClickLeft() {
      this.$router.go(-1);
    },
    // 城市页面和医生页面通过count1等于1，来进行判断
    showCity() {
      if (this.count1 === 0) {
        this.count1 = 1;
        this.count2 = 0;
        this.count3 = 0;
      } else if (this.count1 === 1) {
        this.count1 = 0;
        this.count3 = 1;
      }
    },
    // 科室页面和医生页面通过count2等于1，来进行判断
    showKeshi() {
      if (this.count2 === 0) {
        this.count2 = 1;
        this.count1 = 0;
        this.count3 = 0;
      } else {
        this.count2 = 0;
        this.count3 = 1;
      }
    },
  },
};
</script>
<style lang="less">
.doctorlist {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-x: scroll;
  // width: 375.2px;
  // white-space: nowrap;

  ::-webkit-scrollbar {
    width: 0 !important;
  }

  ::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
  }
}
</style>
